<template>
	<view>
        <view style="padding: 20upx 0;">
            <view style="padding: 20upx 0;">
                <jk-progress :precent="25"></jk-progress>
            </view>
            <view style="padding: 20upx 0;">
                <jk-progress :precent="45"></jk-progress>
                
            </view>
            <view style="padding: 20upx 0;">
                <jk-progress :precent="65"></jk-progress>
                
            </view>
            <view style="padding: 20upx 0;">
                
                <jk-progress :precent="100"></jk-progress>
            </view>
        </view>
        <view>
            <jk-progress :precent="precent"></jk-progress>
            <jk-button @click="add">增加</jk-button>
            <jk-button @click="minus">减少</jk-button>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				precent: 0
			};
		},
        methods: {
            add(){
                if(this.precent < 100)
                this.precent = this.precent + 10
            },
            minus(){
                if(this.precent > 0)
                this.precent = this.precent - 10
            }
        }
	}
</script>

<style lang="scss">

</style>
